.auto-scroll-text {
    overflow: hidden;
    .wrap {
        position: relative;
        line-height: 2;
        height: 2em;
        overflow: hidden;
        background: #fff;
    }
    
    .title {
        display: block;
        white-space: nowrap;
        text-overflow: ellipsis;
        background-color: inherit;
        overflow: hidden;
        position: relative;
        top: -4em;
    }
    
    .txt {
        display: block;
        max-height: 4em;
    }
    
    .title:hover {
        display: inline-block;
        animation: move 10s .3s linear infinite;
    }
    
    .title::after {
        content: attr(data-title);
        padding: 0 5em;
    }
    
    @keyframes move {
        to {
            transform: translate3d(-50%, 0, 0);
        }
    }
}


.auto-middle-text {
    overflow: hidden;
    .wrap {
        position: relative;
        line-height: 2;
        height: 2em;
        overflow: hidden;
        background: #fff;
    }
    
    .title {
        display: block;
        position: relative;
        background: inherit;
        text-align: left;
        height: 2em;
        overflow: hidden;
        top: -4em;
    }
    
    .txt {
        display: block;
        max-height: 4em;
    }
    
    .title::before {
        content: attr(data-title);
        width: 57%;
        float: right;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        direction: rtl;
    }
}

